<template>
    <div class="role-wrapper">
        <div class="nav-back" @click="goBack">
            <span><i class="el-icon-arrow-left"></i>返回</span>
        </div>
        <div class="role-box" v-loading="loading">
            <el-tree :data="allData" :default-checked-keys="checkedKeys" show-checkbox default-expand-all node-key="functionId" ref="tree" highlight-current :props="defaultProps">
            </el-tree>
            <!-- <div class="item" v-for="(item1,index1) in allData" :key="item1.functionId">
                <div class="title">
                    <el-checkbox :indeterminate="item1.isIndeterminate" :checked="item1.isSelect  == '1' ? true : false" v-model="item1.isSelect" :label="item1.functionName" @change="LevelOneSelectAll(item1.isSelect,index1)">{{item1.functionName}}</el-checkbox>
                </div>
                <div class="content" v-for="(item2,index2) in item1.children" :key="item2.functionId">
                    <el-checkbox :indeterminate="item2.isIndeterminate" v-model="item2.isSelect" :label="item2.functionName" :checked="item2.isSelect == '1' ? true : false" @change="LevelTwoSelectAll(item2.isSelect,index1,index2)">{{item2.functionName}}</el-checkbox>
                    <div class="three">
                        <el-checkbox v-for="(item3,index3) in item2.children" v-model="item3.isSelect" :label="item3.functionName" :checked="item3.isSelect == '1' ? true : false" :key="item3.functionId" @change="LevelThreeSelectAll(index1,index2)">{{item3.functionName}}</el-checkbox>
                    </div>
                </div>
            </div> -->
            <div class="btn-box">
                <!-- <el-button class="btn" type="primary" @click="handle AllChecked">全选</el-button>
                <el-button class="btn" type="info" @click="handleEmptyAllChecked">清空</el-button> -->
                <el-button class="btn" type="primary" @click="handleCheckedSure">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
import mixin from '@/assets/js/mixin'
export default{
    mixins: [mixin],
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'functionName'
            },
            checkedKeys: [],
            isIndeterminate: false,
            roleId: '',
            checkAll: [],
            checked1: [],
            checkedBox: [],
            allData: [],
            checkedId: [],
            checkedName: []
        }
    },
    created() {
        this.roleId = this.$route.query.roleId
        this.loading = true
        this.initData()
    },
    methods: {
        getTree(data) {
            let objId = []
            data.forEach(item => {
                if(data.length != 0) {
                    data.forEach((item)=> {
                        if(item.isSelect == '1'){
                            objId.push(item.functionId)
                        }
                    })
                }
                if(item.children && item.children.length > 0){
                    item.children = this.getTree(item.children)
                }
            })
        },
        // renderContent(h, { node, data }) {
        //     let className = ''
        //     return (<div class={className}>{data.functionName}</div>)
        // },
        handleCheckedSure() {
            let setCheckedKeys = this.$refs.tree.getCheckedKeys()
            let getHalfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
            let functionId = [...getHalfCheckedKeys,...setCheckedKeys]
            request({
                url: '/manager/role/roleInfoSave.jsp',
                method: 'post',
                data: {
                    txtAction: 'permissions',
                    roleId: this.roleId,
                    functionId: functionId.join(',')
                }
            }).then(res => {
                if(res.code == 200) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                }
            })
        },
        initData() {
            let roleId = this.$route.query.roleId
            request({
                url: '/manager/role/rolePermissions.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    roleId
                }
            }).then(res => {
                if(res.code == 200) {
                    this.loading = false
                    var result = res.data.permissions;
                    let one = []
                    let two = []
                    let three = []
                    // this.getTree(result)
                    for (var i = 0; i < result.length; i++) {
                        let childrenArray = result[i].children;
                        let len = childrenArray.length;
                        if(result[i].isSelect == '1' && result[i].children.length == 0) {
                            this.checkedId.push(result[i].functionId)
                        }
                        for (var j = 0; j < len; j++) {
                            if (childrenArray[j].isSelect == '1' && !childrenArray[j].children) {
                                two.push(childrenArray[j].functionId)
                                this.checkedId.push(childrenArray[j].functionId)
                            }
                            let threeArray = childrenArray[j].children
                            if(threeArray && threeArray.length > 0) {
                                for(let k= 0; k< threeArray.length; k++) {
                                    if(threeArray[k].isSelect == '1') {
                                        three.push(threeArray[k].functionId)
                                        this.checkedId.push(threeArray[k].functionId)
                                    }
                                }
                                if(three.length == threeArray.length) {
                                    this.checkedId.push(childrenArray[j].functionId)
                                }
                            }
                        }
                    }
                    this.checkedKeys = Array.from(new Set(this.checkedId))
                    this.allData = result
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.role-wrapper{
    width: 100%;
    background: #fff;
    /deep/.role-box{
        width: 100%;
        padding: 20px;
        .title{
            margin: 20px 0;
            .el-checkbox__label{
                color: #000;
                font-weight: 600;
            }
        }
        .content{
            padding: 10px 20px;
            .three{
                margin: 10px 0;
                padding: 10px 20px;
            }
        }
        // .el-checkbox__inner{
        //     width: 16px;
        //     height: 16px;
        // }
        .el-tree-node__label{
            font-size: 15px;
        }
        .el-checkbox__inner{
            border-color: #898989;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
            border-color: #106fc6;
            background-color: #106fc6;
        }
        // .el-tree-node__children{
        //     .el-tree-node{
        //         display: inline-block;
        //     }
        // }        
    }
    .item{
        margin: 20px 0;
    }
    .btn-box{
        margin-top: 20px;
        padding: 20px 0;
        text-align: right;
        border-top: 1px solid #d5d5d5;
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
            border: none;
        }
    }
}

</style>